<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width,initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>Document</title>
</head>

<body>
    <div id='app'>
        <!-- 通过组件名使用组件 -->
        <a-com></a-com>
        <a-com></a-com>
        <a-com></a-com>
        <a-com></a-com>
        <a-com></a-com>
        <!-- span+button+br -->
        <!-- 
            1
            2
            3
            4
            5
         -->
        <!-- <span>{{count1}}</span><button @click="changeC1">按钮</button><br>
        <span>{{count2}}</span><button @click="changeC2">按钮</button><br>
        <span>{{count3}}</span><button @click="changeC3">按钮</button><br>
        <span>{{count4}}</span><button @click="changeC4">按钮</button><br>
        <span>{{count5}}</span><button @click="changeC5">按钮</button><br> -->
    </div>
    <script src='./vue.js'></script>
    <script>
        // Vue组件
        // 组件是一种封装
        // 封装html css js
        // 组件是特殊的Vue实例
        // -> 组件也可以使用选项 data methods 等
        // -> 组件也有自己的选项 比如template
        // 组件分为全局和局部
        // 每用一次组件 就相当于new一个新实例
        // 组件有自己的作用域
        // 组件可以复用代码
        // 组件也可以多次使用


        // 全局组件
        // 在之后的newVue实例所管理的视图中都可以使用!!
        // Vue.filter
        // Vue.directive
        // 1. Vue.component('组件的名字',{选项:值})
        // 组件名建议使用小写字母加短横线连接的方式
        // 2. 在标签中通过组件名使用组件
        // 就把组件当成是自定义标签去使用
        Vue.component('a-com', {
            // 选项:值
            // template标签结构
            // 注意:有且只有一个根元素
            template: `
            <div>
                    <span>{{count}}</span>
                    <button @click="changeC">按钮</button>
                    <br>
            </div>        
            `,
            // data是当前组件要用的数据
            // 注意:data必须是带有返回值的函数
            data() {
                return {
                    count: 0
                }
            },
            methods: {
                changeC() {
                    this.count++;
                }
            }
        });


        new Vue({
            el: '#app',
            // data: {
            //     count1: 0,
            //     count2: 0,
            //     count3: 0,
            //     count4: 0,
            //     count5: 0,

            // },
            // methods: {
            //     changeC1() {
            //         this.count1++;
            //     },
            //     changeC2() {
            //         this.count2++;
            //     },
            //     changeC3() {
            //         this.count3++;
            //     },
            //     changeC4() {
            //         this.count4++;
            //     },
            //     changeC5() {
            //         this.count5++;
            //     }
            // }
        });
    </script>
</body>

</html>